import React, { useState, useContext } from 'react'
import { Modal, Input, Form, Upload } from 'antd'
import utils from '@utils'
import message from '@utils/message'

const style = {
  marginTop: '20px'
}

export default props => {
  let [form] = Form.useForm()
  let { params } = props

  const onFinish = () => {
    form.validateFields()
      .then(res => {
        let data = {
          ...params,
          ...res
        }
        utils.post('/api/order/cancel', data).then(res => {
          if (res.errorCode == 0) {
            props.onOk()
          }
        })
      })
      .catch(err => { })
  }

  return <Modal
    title={props.title}
    visible={true}
    onOk={onFinish}
    onCancel={() => {
      props.onCancel()
    }}
    okText="确认"
    cancelText="取消"
  >
    <div>
      {
        params.orderType == 1 ? '确定取消此订单？取消后，订单支付金额将原来返还' : '确定取消此订单？取消后，订单积分将回滚'
      }
    </div>
    <div style={style}>订单编号：{params.orderCode}</div>
    <div style={style}>{params.orderType == 1 ? '实付金额' : '积分'}：{params.integral}</div>
    <Form form={form} initialValues={params} style={style}>
      <Form.Item name="remark" label="原因"
        rules={
          [{
            required: true,
            message: '请输入原因',
          }]
        }
      >
        <Input.TextArea rows={4} placeholder='请输入原因' allowClear />
      </Form.Item>
    </Form>
  </Modal>
}